<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>animate动画效果</title>
    <script src="vue.js"></script>
    <link rel="stylesheet" type="text/css" href="animate.css">
</head>
<body>
    <div id="app">
        <!--
            官方库：
            https://daneden.github.io/animate.css/
            使用animate.css动画注意事项
            1、引入css
            2、私用自定义动画类enter-active-class  leave-active-class
            3、类中需要加入animated  然后后面跟上动画的显示效果类
        -->
        <transition
                name="fade"
                enter-active-class="animated rollIn"
                leave-active-class="animated hinge"
        >
            <div v-show="show">Hello World ...</div>
        </transition>

        <button @click="handleClick">Toggele</button>
    </div>

    <script>
        new Vue({
            el : "#app" ,
            data : {
                show : false
            },
            methods : {
                handleClick : function(){
                    this.show = !this.show ;
                }
            }
        })
    </script>
</body>
</html>